<script setup lang="ts">
import {ref, watch} from 'vue'

const content = ref('')
const markdownOption = ref({
  bold: true, // 粗体
  italic: true, // 斜体
  header: true, // 标题
  underline: true, // 下划线
  strikethrough: true, // 中划线
  mark: true, // 标记
  superscript: true, // 上角标
  subscript: true, // 下角标
  quote: true, // 引用
  ol: true, // 有序列表
  ul: true, // 无序列表
  link: true, // 链接
  imagelink: true, // 图片链接
  code: true, // code
  table: true, // 表格
  fullscreen: true, // 全屏编辑
  readmodel: true, // 沉浸式阅读
  htmlcode: true, // 展示html源码
  undo: true, // 上一步
  redo: true, // 下一步
  trash: true, // 清空
  save: false, // 保存（触发events中的save事件）
  navigation: true, // 导航目录
  alignleft: true, // 左对齐
  aligncenter: true, // 居中
  alignright: true, // 右对齐
  subfield: true, // 单双栏模式
  preview: true, // 预览
});

watch(()=>content.value,()=>{
  console.log(content.value)
})

</script>

<template>
  <div class="mEditorBox">
    <mavon-editor
        class="w-full h-full"
        toolbarsBackground="#f1f5f9"
        v-model="content"
        :autofocus="true"
        :subfield="true"
        :placeholder="'快来留下你的痕迹吧!'"
        :toolbars="markdownOption"/>
  </div>
</template>
<style lang="less" scoped>
:deep(.op-image.popup-dropdown.transition) div:last-child{
  display: none;
}
:deep(.v-right-item.transition){
  display: flex;
  justify-content: end;
  gap: 0.5rem;
}
:deep(.v-note-wrapper .v-note-op .v-right-item .op-icon.selected){
  background: #bfdbfe;
}
</style>
